'use strict'
import React from 'react';
import ReactDom from 'react-dom';
import './panelPop.scss';

class PanelPop {
    constructor() {
        this.opts = {
            maskClosable: true,
            onMaskClose: null
        }
    }
    close() {
        ReactDom.unmountComponentAtNode(this.node);
        this.node.parentNode.removeChild(this.node);
        this.node = null;
    }
    show(content, opts) {
        opts = opts || {};
        Object.assign(this.opts, opts);
        if (!this.node) {
            this.node = document.createElement("div");
            document.getElementById("map").appendChild(this.node);
        }
        ReactDom.render(
            <div className="panelPop flex-col">
                <div className="bg" onClick={this.close}></div>
                <div className="content flex-g-1">
                    {content}
                </div>
                <div className="bottom">
                    <button onClick={this.close.bind(this)}>关闭</button>
                </div>
            </div>, this.node)
    }
}

export let panelPop = new PanelPop();
